import React from 'react'
import '../assets/css/botplay.css'
import Controlplay from './Controlplay'
import { Carousel, WingBlank } from 'antd-mobile';
class Botplay extends React.Component {
    constructor() {
        super()
        this.state = {
            index: 0,
        }
    }
    componentDidMount() {
        //传入id
        if (Object.keys(this.props.id)[0] === 'listid') {
            this.props.getmusic(this.props.id.listid)
        } else {
            this.props.getsingle(this.props.id.singleid)
        }
    }
    componentDidUpdate() {
        //当前播放列表播放的music id
        try {
            this.props.getMusicId(this.props.playmusiclist[this.state.index].id)
        } catch (e) {

        }
    }
    //滑动切歌
    handleSwipe(index) {
        this.setState({
            index: index
        })
        setTimeout(() => {
            this.props.getMusicURLApi(this.props.playmusiclist[index].id)
        }, 50)
        //修改当前播放音乐的索引
        this.props.getNowMusicindex(index)
    }
    //控制播放页面出现
    handleShowplay() {
        this.props.changeShowplay(true)
    }

    render() {
        // console.log(this.props.listmusicindex)
        let data = 10000;
        let model = true
        //自动切换的时间
        try {
            data = this.props.playmusiclist[this.state.index].dt - (this.props.time * 250)
        } catch (e) {

        }
        if (this.props.cycle === 'list' && data < 500) {
            //当data小于500执行切换下一首
            this.handleSwipe(this.props.listmusicindex + 1)
            //清除以播放的时长
            this.props.clearTimenow()
        } else if (this.props.cycle === 'only' && data < 500) {
            this.handleSwipe(this.props.listmusicindex)
            //清除以播放的时长
            this.props.clearTimenow()
        } else if (this.props.cycle === 'random' && data < 500) {
            let num = Math.floor(Math.random() * this.props.playmusiclist.length)
            this.handleSwipe(num)
            //清除以播放的时长
            this.props.clearTimenow()
        }
        let circle = 'musicpic'
        if (!this.props.audio) {
            circle = 'musicpic musicpic2'
        }
        return (
            <div className='container'>
                <div onClick={this.handleShowplay.bind(this)}>
                    <WingBlank >
                        <Carousel
                            autoplay={false}
                            // autoplayInterval={time}
                            dots={false}
                            selectedIndex={this.props.listmusicindex}
                            infinite
                            beforeChange={(from, to) => { }}
                            afterChange={index => {
                                this.handleSwipe(index);
                                try {
                                    if (index !== this.props.listmusicindex) {
                                        //清除以播放的时长
                                        this.props.clearTimenow()
                                    }
                                }catch(e){
                                    
                                }
                            }}

                        >

                            {this.props.playmusiclist.map(item => {
                                return (
                                    <div className='music-container' key={item.id}>
                                        <span className={circle}><img src={item.al.picUrl} alt="" /></span>
                                        <span className='musicname'>{item.name}</span>
                                    </div>
                                )
                            })}
                        </Carousel>
                    </WingBlank>
                </div>
                {/* 引入控制按钮 */}
                <Controlplay {...this.props} index={this.state.index} />

            </div>
        )
    }
}
export default Botplay;